<template>
    <div class='header'>
        <Logo></Logo>
        <nav>
            <ul>
                <li v-for="item in menuList" :key="item.path" :class="activeName===item.name?'on':''" @click="activeName=item.name">
                    <router-link :to="item.path">
                        {{ item.meta.fullName }}
                    </router-link>
                </li>
            </ul>
        </nav>
    </div>
</template>

<script>
import Logo from '@/components/Logo.vue';
import menuList from '@/utils/menuList';
export default {
    name: 'header-page',
    components:{
		Logo
	},
    watch:{
        $route:{
            handler(val){
                this.activeName = this.menuList.find(item=>item.name==val.name).name
            },
            immediate:true
        }
    },
    data() {
        return {
            activeName: '',
            msg: 'header-page',
            menuList,
        }
    },
     methods: {
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
      }
    }
}
</script>

<style scoped lang='less'>
.header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;

    nav{
        ul{
            display: flex;
            li{
                margin:0 20px;
                a{
                    padding: 5px;
                    color: #aaa;
                    &:hover{
                        color: var(--mc);
                    }
                }
                &.on a{
                    color: var(--mc);
                    border-bottom: 2px solid var(--mc);
                }
            }
        }
    }
}
</style>